/**
 * 
 * 客户列表 销售分析
 * 
 * */
import React, { useCallback, useMemo, useState } from 'react';
import Header from '@/component/layout/Header/Header';
import ListTitle from "@/component/layout/ListTitle/ListTitle";
import CommonList from '@/component/common/CommonList/CommonList';
import { getDoctorAction, getSaleAction } from '@/network/protocol';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import './style.less';

const img1 = <img alt="" className="edit" src={require('../../assests/img/edit.png')} />
const pageSize = 20;

const CustomerAnalysis = (props) => {
  const { user } = props;
  const [param, setParam] = useState({ pageIndex: 1, pageSize })

  const param1 = useMemo(() => {
    return {
      ...param,
      ...([{ managerId: user.userId }, { saleId: user.userId }][user.role - 1])
    }
  }, [param, user.role, user.userId]);

  const update = useCallback(() => {
    setParam({ ...param, pageIndex: param.pageIndex + 1 })
  }, [param])

  const meetingType = useMemo(() => {
    return ['全国会', '区域会', '城市会']
  }, [])

  const method = useMemo(() => {
    // 区域经理1 销售2
    return [getSaleAction, getDoctorAction][user.role - 1]
  }, [user.role])

  const textMap = useMemo(() => {
    return ['销售分析', '医生分析'][user.role - 1]
  }, [user.role])

  const SaleList = useCallback((props) => {
    const { data } = props;
    return <div className="Customer-list-item-itembox">
      <Link className="Customer-list-item" to={'/docListAnalysis?saleId=' + data.saleId}>
        <p className="p1">
          <span >姓名：<span className="saleName">{data.saleName || '--'}</span></span>
          <span>区域：{data.area}</span>
        </p>
        <p className="p2">
          {/* <span>浏览次数：{data.medicalTimes + data.productTimes}</span> */}
          {/* <span>发会类型：{meetingType[data.meetingType]}</span> */}
          <span>发会次数：{data.meetingTimes}</span>
        </p>
      </Link>
    </div>

  }, [])

  const DocList = useCallback((props) => {
    const { data } = props;
    return <div className="Customer-list-item-itembox">
      <div className="Customer-list-item">
        <p className="p1">
          <span>姓名：{data.doctorName}</span>
          <span>医院：--</span>
        </p>
        <p className="p1">
          <span>门诊量：{data.doctorName}</span>
          <span>参会总次数：{data.meetingTimes}</span>
        </p>

        <p className="p2">
          <span>浏览次数：{data.futureTimes}</span>
          {/* <span>参会类型：{meetingType[data.meetingType]}</span> */}
          {/* <span>参会次数：{data.meetingTimes}</span> */}
        </p>

      </div>
    </div>


  }, [])

  const viewCmp = useMemo(() => {
    return [SaleList, DocList][user.role - 1]
  }, [DocList, SaleList, user.role])

  return <>
    <Header center={<span>客户管理</span>} />
    <div className="global-content CustomerAnalysis-box">
      <div className="header-box">
        <ListTitle img={img1} text={textMap} />
        {/* <div className="select-box">
          <p>地区选择</p>
          <img src={require('../../assests/img/down.png')} alt="" />
        </div> */}
      </div>
      <div className="list-box">
      <CommonList mapkey="saleId" update={update} viewCmp={viewCmp} param={param1} method={method} />
      </div>
    </div>
  </>

}

const mapStateToProps = state => {
  return {
    user: state.user
  }
}

export default connect(mapStateToProps, null)(CustomerAnalysis);
